<template>
  <el-dialog
    top="30px"
    width="900px"
    append-to-body
    title="编辑项目资金投入情况及资金来源情况"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <table class="table table-bordered table-sm bg-white table-vertical-middle text-center">
      <colgroup>
        <col width="12%" />
        <col width="20%" />
        <col width="12%" />
        <col width="22%" />
        <col width="14%" />
        <col width="20%" />
      </colgroup>
      <tr>
        <td class="text-left" colspan="6">（一）、项目投入</td>
      </tr>
      <tr>
        <td>土地流转</td>

        <td class="report-input-td">
          <el-input v-model="hotel.land_cir" v-input-number="{ min: 0 }" placeholder="土地流转">
            <span slot="append">万元</span>
          </el-input>
        </td>
        <td>基础设施建设</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.base_buid"
            v-input-number="{ min: 0 }"
            placeholder="基础设施建设"
          >
            <span slot="append">万元</span>
          </el-input>
        </td>
        <td>房屋建筑及装修</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.house_fix"
            v-input-number="{ min: 0 }"
            placeholder="房屋建筑及装修"
          >
            <span slot="append">万元</span>
          </el-input>
        </td>
      </tr>
      <tr>
        <td>运营资金投入</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.operate_funds"
            v-input-number="{ min: 0 }"
            placeholder="运营资金投入"
          >
            <span slot="append">万元</span>
          </el-input>
        </td>
        <td>其它投入</td>
        <td class="report-input-td" colspan="3">
          <el-input
            v-model="hotel.other_operate_funds"
            v-input-number="{ min: 0 }"
            placeholder="其它投入"
          >
            <span slot="append">万元</span>
          </el-input>
        </td>
      </tr>
      <tr>
        <td class="text-left" colspan="6">（二）、资金来源</td>
      </tr>
      <tr>
        <td>自有资金</td>
        <td class="report-input-td">
          <el-input v-model="hotel.self_funds" v-input-number="{ min: 0 }" placeholder="自有资金">
            <span slot="append">万元</span>
          </el-input>
        </td>
        <td>银行借款</td>
        <td class="report-input-td">
          <el-input v-model="hotel.load_funds" v-input-number="{ min: 0 }" placeholder="银行借款">
            <span slot="append">万元</span>
          </el-input>
        </td>
        <td>其它借款</td>
        <td class="report-input-td">
          <el-input v-model="hotel.other_funds" v-input-number="{ min: 0 }" placeholder="其它借款">
            <span slot="append">万元</span>
          </el-input>
        </td>
      </tr>
      <tr>
        <td>项目扶持</td>
        <td class="report-input-td">
          <el-input
            v-model="hotel.project_support_funds"
            v-input-number="{ min: 0 }"
            placeholder="项目扶持"
          >
            <span slot="append">万元</span>
          </el-input>
        </td>
        <td>其它资金来源</td>
        <td class="report-input-td" colspan="3">
          <el-input
            v-model="hotel.other_support_funds"
            v-input-number="{ min: 0 }"
            placeholder="其它资金来源"
          >
            <span slot="append">万元</span>
          </el-input>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="5" class="report-input-td">
          <el-input
            type="textarea"
            v-model="hotel.remark_input"
            placeholder="备注"
            :rows="3"
          ></el-input>
        </td>
      </tr>
    </table>
    <div class="text-center mt-5">
      <el-button type="primary" class="btn-long" :loading="saveLoading" @click="handleConfirm">
        提交
      </el-button>
      <el-button class="btn-long" :loading="saveLoading" @click="beforeClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  props: {
    visible: Boolean,
    formData: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      hotel: {},
      hotelTable: 'credit_industrial_hotel_invest',
      saveLoading: false,
    }
  },
  computed: {},
  watch: {
    formData: {
      handler: function () {
        this.hotel = { ...this.formData }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleConfirm() {
      if (!this.hotel.id) {
        return
      }
      this.saveLoading = true
      Object.keys(this.hotel).forEach(key => {
        if (!this.hotel[key]) {
          this.hotel[key] = null
        }
      })
      this.$api
        .updateData(this.$serviceName, this.hotelTable, this.hotel.id, this.hotel)
        .then(() => {
          this.$message.success('保存成功')
          this.handlerSuccess()
          this.beforeClose()
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '保存失败，请重试！')
        })
        .finally(() => {
          this.saveLoading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handlerSuccess() {
      this.$emit('success', true)
    },
  },
}
</script>

<style lang="scss" scoped>
.report-input-td {
  background-color: #ffffee;
}
</style>
